<style lang="scss" scoped>
	.content {
		.section {
			background-color: #ffffff;
			margin-bottom: 0.2rem;

			&-header {
				padding: 0.3rem 0.2rem;
				border-bottom: 0.01rem solid #e9e9e9;
				font-size: 0.36rem;
				font-weight: 600;
			}

			&-detail {
				p {
					padding: 0.15rem 0.25rem;
					font-size: 0.3rem;

					&.divider {
						border-bottom: 0.01rem solid #e9e9e9;
					}
				}

				.step {
					p {
						padding: 0 0 0.1rem 0;
						font-size: 0.3rem;
					}
				}
			}
		}

		.service {
			background-color: #ffffff;
			padding: 0.2rem;
		}
	}

	.action {
		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0.25rem 0;
			font-size: 0.32rem;
		}
	}

	.tool {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		z-index: 99;

		.btn {
			display: flex;
			flex-grow: 1;
			align-items: center;
			justify-content: center;
			height: 100%;
			background-color: #179afe;
			font-size: 0.3rem;
			color: #ffffff;

			&.action {
				background-color: #ffffff;
				color: #179afe;
			}

			&.disabled {
				background: #e9e9e9;
				color: #777777;
			}
		}
	}
</style>

<template>
	<div class="container hasNav hasTabbar">
		<van-nav-bar left-arrow left-text="返回" @click-left="$router.back()" fixed>
			<template slot="title">
				<van-tabs v-model="activeName" type="card" color="#179AFE">
					<van-tab title="服务详情" name="detail"></van-tab>
					<van-tab title="服务内容" name="content"></van-tab>
				</van-tabs>
			</template>
			<template slot="right" v-if="detail.serviceTrackStatus >= 5">
				<van-icon name="apps-o" size=".4rem" @click="showAction = true" />
			</template>
		</van-nav-bar>
		<div class="content" v-show="activeName === 'detail'">
			<div class="section">
				<div class="section-header">陪诊信息</div>
				<div class="section-detail">
					<p>订单号：{{detail.orderNo}}</p>
					<p>是否需要挂号：{{detail.isRegister == 0 ? '否' : '是'}}</p>
					<p>服务套餐：{{detail.packageName}}</p>
					<p>医院：{{detail.hospitalName}}</p>
					<p>科室：{{detail.departmentName}}</p>
					<p>就诊医生：{{detail.visitDoctor}}</p>
					<p>服务时间：{{detail.serviceDate}}</p>
					<p>下单时间：{{detail.createDate}}</p>
					<p>收入：<span class="num">{{detail.income}}</span></p>
					<p>状态：已支付</p>
					<p>留言：{{detail.remarkMessage}}</p>
				</div>
			</div>
			<div class="section" v-if="detail.serviceTrackStatus !== 3">
				<div class="section-header">就诊人信息</div>
				<div class="section-detail">
					<p>就诊人：{{member.name}}</p>
					<p>性别：{{member.gender}}</p>
					<p>出生日期：{{member.birthday}}</p>
					<p>联系电话：{{member.phone}}</p>
					<p>身份证号：{{hideNum(member.idCard,4,4)}}</p>
					<p>医保卡号：{{member.socialCard}}</p>
					<p>上门地址：{{member.addressAbove}}</p>
				</div>
			</div>
			<div class="section" v-if="detail.serviceTrackStatus !== 3">
				<div class="section-header">病情描述</div>
				<div class="section-detail">
					<p>主诉：{{detail.remarkMessage}}</p>
				</div>
			</div>
			<div class="section" v-if="detail.serviceTrackStatus !== 3">
				<div class="section-header">服务跟踪</div>
				<div class="section-detail">
					<van-steps class="step" direction="vertical" :active="tracks.length-1" active-color="#179afe">
						<van-step v-for="(item,index) in tracks" :key="index">
							<p>{{item.trackStatusStr}}</p>
							<p>{{item.serviceTrackDate}}</p>
						</van-step>
					</van-steps>
				</div>
			</div>
		</div>
		<div class="content" v-if="activeName === 'content'">
			<div class="service" v-html="detail.serviceContent"></div>
		</div>
		<!-- 操作栏 -->
		<div class="tool">
			<div class="btn" v-if="detail.serviceTrackStatus == 3 || detail.serviceTrackStatus == 4" @click="accpet">接单
			</div>
			<template v-else>
				<div v-if="detail.serviceTrackStatus == 5" class="btn" @click="checkIn">到达医院</div>
				<div v-if="detail.serviceTrackStatus == 6" class="btn" @click="action(9)">开始服务</div>
				<div v-if="detail.serviceTrackStatus == 9" class="btn" @click="action(10)">结束服务</div>
				<div v-if="detail.serviceTrackStatus == 10" class="btn disabled">服务结束</div>
				<div v-if="detail.serviceTrackStatus < 7" class="btn action" @click="showRemind = true;">提醒客户</div>
			</template>
		</div>
		<!-- action菜单 -->
		<van-action-sheet v-model="showAction">
			<div class="action">
				<p class="item">
					<a :href="`tel:${member.phone}`">呼叫客户</a>
				</p>
				<p class="item">
					<router-link :to="{ path:'/order/upload', query:{ id } }">上传病历</router-link>
				</p>
				<p class="item">
					<router-link :to="{ path:'/order/plan', query:{ id } }">服务策划</router-link>
				</p>
				<p class="item">
					<router-link :to="{ path:'/order/Summary', query:{ id } }">服务总结</router-link>
				</p>
			</div>
		</van-action-sheet>
		<Loading :isShow="loading"></Loading>
		<van-dialog v-model="showRemind" title="请输入提醒，内容200字以内" show-cancel-button confirmButtonColor="#179AFE"
			@confirm="remind" @closed="remindText = ''">
			<van-field v-model="remindText" rows="2" autosize type="textarea" maxlength="200" placeholder="请输入提醒内容"
				show-word-limit />
		</van-dialog>
	</div>
</template>

<script>
	import Loading from '../../components/Loading';
	import {
		getOrderDetail,
		getReceiveOrderDetail,
		receiveOrder,
		sendRemind,
		changeOrderStatus
	} from '../../api/order';
	import {
		hideNum
	} from '../../utils/index';

	export default {
		name: 'OrderDetail',
		components: {
			Loading
		},
		data() {
			const {
				id
			} = this.$route.query;

			return {
				loading: true,
				id, //订单状态 3订单派发5接单成功6到达医院7已完成8已取消
				activeName: 'detail',
				showAction: false,
				detail: {},
				member: {},
				renew: {},
				tracks: [],
				showRemind: false, //显示提醒弹窗
				remindText: ''
			};
		},
		async beforeMount() {
			await this.getDetail();
		},
		methods: {
			hideNum,
			//获取订单详情
			async getDetail() {
				try {
					const params = {
						recordid: this.id
					};
					const res = this.detail.serviceTrackStatus == 3 ? await getOrderDetail(params) :
						await getReceiveOrderDetail(params);

					if (res.errorcode == 0) {
						if (this.detail.serviceTrackStatus == 3) {
							this.detail = res.record;
						} else {
							this.detail = res.record;
							this.member = res.member;
							this.renew = res.renew;
							this.tracks = res.tracks;
						}

						this.$nextTick(() => {
							this.loading = false;
						});
					} else {
						this.$toast(res.errormsg);
					}
				} catch (error) {
					console.log(error);
					this.loading = false;
				}
			},
			//未接订单-接单
			accpet() {
				this.$dialog({
						title: '温馨提示',
						message: '请确认您是否有时间提供服务，如果一周内取消两次服务，您将被禁止一周接单。',
						confirmButtonColor: '#179afe',
						showCancelButton: true
					})
					.then(async () => {
						try {
							const params = {
								recordid: this.id
							};

							const {
								errorcode,
								errormsg
							} = await receiveOrder(params);

							if (errorcode == 0) {
								this.$toast('接单成功！');
								this.$router.push('/order/index');
							} else {
								this.$toast('接单失败，请稍后再试');
							}
						} catch (error) {
							console.log(error);
						}
					})
					.catch(() => {});
			},
			//已接订单-提醒客户
			async remind() {
				try {
					if (!this.remindText) {
						this.$toast('请输入提醒内容');
						return;
					}

					const {
						errorcode,
						errormsg
					} = await sendRemind({
						recordId: this.id,
						content: this.remindText
					});

					const msg = errorcode == 0 ? '提醒发送成功' : errormsg;

					this.$toast(msg);
					this.showRemind = false;
				} catch (error) {
					console.log(error);
				}
			},
			// 已接订单-到达医院
			checkIn() {
				this.$dialog({
						title: '温馨提示',
						message: '您是否已到达客户看诊医院',
						confirmButtonColor: '#179afe',
						showCancelButton: true
					})
					.then(() => {
						this.changeStatus(6);
					})
					.catch(() => {});
			},
			action(status) {
				this.$dialog({
						title: '提示',
						message: '是否确认操作',
						confirmButtonColor: '#179afe',
						showCancelButton: true
					})
					.then(async () => {
						await this.changeStatus(status);
					})
					.catch(() => {});
			},
			//变更订单状态
			async changeStatus(status) {
				try {
					const {
						errorcode,
						errormsg
					} = await changeOrderStatus({
						recordid: this.id,
						status
					});

					if (errorcode == 0) {
						this.$toast('操作成功');
						this.getDetail();
					} else {
						this.$toast(errormsg);
					}
				} catch (error) {
					console.log(error);
				}
			}
		}
	};
</script>
